<form id="form1" runat="server">  

        <div class="container">  

            <h2>Basic Table</h2>  

            <table class="table" id="maintable">  

                <thead>  

                    <tr>  

                        <th>Firstname</th>  

                        <th>Lastname</th>  

                        <th>Email</th>  

                    </tr>  

                </thead>  

                <tbody>  

                    <tr class="data-contact-person">  

                        <td>  

                            <input type="text" name="f-name" class="form-control f-name01" /></td>  

                        <td>  

                            <input type="text" name="l-name" class="form-control l-name01" /></td>  

                        <td>  

                            <input type="text" name="email" class="form-control email01" /></td>  

                        <td>  

                            <button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>  

                        </td>  

                    </tr>  

                </tbody>  

            </table>  

            <button type="button" id="btnSubmit" class="btn btn-primary btn-md pull-right btn-sm" onclick="return btnSubmit_onclick()" onclick="return btnSubmit_onclick()" onclick="return btnSubmit_onclick()">Submit</button>  

        </div>

        <script type="text/javascript">

            $(document).ready(function () {

                $(document).on("click", ".classAdd", function () { //

                    var rowCount = $('.data-contact-person').length + 1;

                    var contactdiv = '<tr class="data-contact-person">' +

                '<td><input type="text" name="f-name' + rowCount + '" class="form-control f-name01" /></td>' +

                '<td><input type="text" name="l-name' + rowCount + '" class="form-control l-name01" /></td>' +

                '<td><input type="text" name="email' + rowCount + '" class="form-control email01" /></td>' +

                '<td><button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>' +

                '<button type="button" id="btnDelete" class="deleteContact btn btn btn-danger btn-xs">Remove</button></td>' +

                '</tr>';

                    $('#maintable').append(contactdiv); // Adding these controls to Main table class  

                });

            });

            $(document).on("click", ".deleteContact", function () {

                $(this).closest("tr").remove(); // closest used to remove the respective 'tr' in which I have my controls   

            });

               </script>  

               

                <script type="text/javascript">